<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加节点</title>
</head>
<body>

<p id="p3">段落3</p>
<div id="app">
    <h2>标题</h2>
    <p id="p1">段落一</p>
    <p class="p2">段落二</p>
</div>

</body>

<script>
    let app = document.getElementById("app");
    let h2 = document.getElementsByName("h2");
    let p1 = document.getElementById("p1");
    let p2 = document.getElementsByClassName("p2");
    let p3 = document.getElementById("p3"); //已存在的节点
    app.appendChild(p3);
    let p4 = htmlParagraphElement = document.createElement("p");
    p4.id = "p4";
    p4.innerText = "段落四";
    app.appendChild(p4);
    let p33 = htmlParagraphElement = document.createElement("p");
    p33.innerText = "段落三";
    app.insertBefore(p33,p3);

</script>

</html>